<template>
  <div class="loginPage">
    <div class="logo">
      <img src="static/images/detail/logo@2x.png" alt="">
    </div>
    <div  class="loginDiv">
      <div class="item">
        <input id="phone" v-model="phone" type="text" placeholder="15959003689" >
        <img src="static/images/detail/icon_Shut@2x.png" alt="" >
      </div>
      <div class="item">
        <input v-model="password" placeholder="..............." >
        <img src="static/images/detail/icon_visible@2x.png" alt="">
      </div>
      <button @click="personLogin">员工登录</button>
    </div>
    <div class="telephone">
      咨询电话:
      <span>010-65388766转168</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {

    }
  },
  methods: {
    //点击员工登录跳转到person页面
    personLogin() {
      //需要判断一下 从那个页面过来的,然后再有目的的跳转到该页面

      //this.$router.push('/welcome')// 跳转到欢迎页面
      //跳转到个人中心
      this.$router.push('/welcome')
    },
    //点击x号 清空输入框的内容
  }
}
</script>

<style lang="less" scoped>
.loginPage{
  margin: 0 10px;
  //background-color: lightblue;
  .goBack{
    width: 355px;
    height: 40px;
    //background-color: lavenderblush;
    display: flex;
    //justify-content: center;//块元素x方向居中对齐
    align-items: center;//块元素x方向左对齐,上下居中
    img{
      width: 28px;
      height: 28px;
      //border: 1px gray dashed;
    }
  }
  .logo{
    width: 355px;
    height: 60px;
    //background-color: lavender;
    margin-top:50px;
    display: flex;
    justify-content: center;//块元素x方向居中对齐
    //align-items: center;//块元素x方向左对齐,上下居中
    img{
      width: 295px;
      height: 60px;
     // border: 1px gray dashed;
    }
  }
  .loginDiv{
    width: 355px;
    height: 225px;
    //background-color: lightgreen;
    margin-top: 50px;
    //display: flex;
    //justify-content: center;//块元素x方向居中对齐
    //align-items: center;//块元素x方向左对齐,上下居中
    padding: 0 20px;
    text-align: center;
    .item{
      width: 315px;
      height: 50px;
      //background-color: lavender;
      margin-top: 10px;
      position: relative;
      input{
        width: 305px;
        height: 50px;
        line-height: 50px;
        background-color: lavender;
        font-size: 18px;
        font-weight: 500;
        border: 0;
        border-radius: 6px;
        padding-left: 10px;
      }
      img{
        width: 24px;
        height: 24px;
        margin-right: 14px;
        //background-color: lightcoral;
        position: absolute;
        top:14px;
        right:10px;
        //border: 1px gray dashed;
      }
    }
    button{
      width: 305px;
      height: 50px;
      background-color: #233982;
      color: white;
      margin-top: 50px;
      border: 0;
      border-radius: 6px;
      font-size: 18px;
    }
  }
  .telephone{
    width: 355px;
    height: 40px;
    //background-color: lightgray;
    position: fixed;
    bottom: 0;
    font-size: 16px;
    color: gray;
    text-align: center;
    span{
      color: #233982;
      font-size: 14px;
      padding-left: 2px;
    }
  }
}

</style>
